<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>手风琴</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			
			#box {
				width: 1400px;
			}
			
			#box li {
				float: left;
				width: 200px;
				height: 260px;
			}
			
			#box li a {
				display: block;
				width: 100%;
				height: 100%;
				color: #fff;
				background: rgba(0, 0, 0, .3);
			}
			
			#box li a span {
				display: block;
				margin: 0 auto;
				padding-top: 40px;
				width: 24px;
				font-size: 24px;
			}
		</style>
		<!--<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>-->

		<script src="jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			;
			(function($) {
				$(function() {
					$('#box li').hover(function() {

						//每次做动画之前 先把上次动画清除掉,不然效果不好
						$(this).children('a').css({
								display: 'none'
							}).end().stop()
							.animate({
								width: 400
							}).siblings().stop().animate({
								width: 160
							});
					}, function() {
						console.log(this) //this 是选中的元素
						$(this).children('a').css('display', 'block');

						$('#box li').stop().animate({
							width: 200
						});
					});
				});
			})(jQuery);
		</script>
	</head>

	<body>
		<ul id="box">
			<li style="background: url(images/1.jpg) center no-repeat">
				<a href="javascript:;"><span>温泉酒店</span></a>
			</li>
			<li style="background: url(images/2.jpg) center no-repeat">
				<a href="javascript:;"><span>情侣酒店</span></a>
			</li>
			<li style="background: url(images/3.jpg) center no-repeat">
				<a href="javascript:;"><span>设计酒店</span></a>
			</li>
			<li style="background: url(images/4.jpg) center no-repeat">
				<a href="javascript:;"><span>青年旅社</span></a>
			</li>
			<li style="background: url(images/5.jpg) center no-repeat">
				<a href="javascript:;"><span>特色客栈</span></a>
			</li>
			<li style="background: url(images/6.jpg) center no-repeat">
				<a href="javascript:;"><span>海岛酒店</span></a>
			</li>
		</ul>
	</body>

</html>